import React from 'react'
import PropTypes from 'prop-types'
import * as Animatable from 'react-native-animatable'
import { View, Text, StyleSheet } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import CustomButton from 'src/components/button/CustomButton'
import CheckButton from 'src/components/check-button'
import { ScaleS, ScaleT, WIDTH } from 'src/utils/ScreenUtil'
import CustomImage from 'src/components/image/CustomImage'
import CustomBoxShadow from 'src/components/boxshadow/CustomBoxShadow'

class OpenBtnSquare extends React.PureComponent {
  render () {
    const { style, ruleCheck, ruleChecked, ruleClick, openClick } = this.props
    return (
      <CustomBoxShadow style={{ ...styles.container, ...style }}>
        <View style={styles.boxShadowView}>
          <View style={styles.leftBtn}>
            <CustomButton style={styles.checkWrap} onPress={ruleCheck}>
              <CheckButton
                style={styles.checkBtn}
                onPress={ruleCheck}
                checked={ruleChecked}/>
              <Text style={styles.checkText}>已阅读并同意</Text>
            </CustomButton>
            <Text onPress={ruleClick} style={styles.ruleText}>《人职初会员协议》</Text>
          </View>
          <CustomButton style={styles.rightBtn} onPress={openClick}>
            <Text style={styles.rightTxt}>升级会员</Text>
            <LinearGradient
              start={{ x: 0, y: 0 }}
              end={{ x: 0, y: 1 }}
              colors={['#DACFB5', '#B3A17E']}
              style={styles.rightLinear}>
              <Text style={styles.discount}>限时</Text>
              <Text style={styles.discount}>5折</Text>
              <View style={styles.rightTriangle}/>
            </LinearGradient>
            <CustomImage style={styles.icon} source={require('@/imgC/member/open_btn_icon1.png')}/>
          </CustomButton>
        </View>
      </CustomBoxShadow>
    )
  }
}

OpenBtnSquare.propTypes = {
  style: PropTypes.object,
  ruleChecked: PropTypes.bool,
  ruleCheck: PropTypes.func,
  ruleClick: PropTypes.func,
  openClick: PropTypes.func
}
export default Animatable.createAnimatableComponent(
  OpenBtnSquare
)
const styles = StyleSheet.create({
  container: {
    width: WIDTH,
    height: ScaleS(60),
    shadowRadius: ScaleS(29),
    shadowOpacity: 0.45,
    shadowColor: '#B1B2B7',
    shadowOffset: {
      width: 0,
      height: ScaleS(6)
    }
  },
  boxShadowView: {
    width: WIDTH,
    height: ScaleS(60),
    flexDirection: 'row',
    backgroundColor: '#ffffff'
  },
  leftBtn: {
    height: '100%',
    width: ScaleS(181),
    backgroundColor: '#ffffff',
    alignItems: 'center'
  },
  checkWrap: {
    paddingTop: ScaleS(7),
    height: ScaleS(33),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  checkBtn: {
    width: ScaleS(20),
    height: ScaleS(20)
  },
  checkText: {
    paddingHorizontal: ScaleS(11),
    fontSize: ScaleT(13),
    fontWeight: '400',
    color: '#444444'
  },
  ruleText: {
    flex: 1,
    paddingTop: ScaleS(3),
    fontSize: ScaleT(12),
    fontWeight: '400',
    color: '#DBB576'
  },
  rightBtn: {
    flex: 1,
    height: '100%',
    backgroundColor: '#444444',
    justifyContent: 'center',
    alignItems: 'center'
  },
  rightTxt: {
    fontSize: ScaleT(20),
    fontWeight: '600',
    color: '#FFFFFF'
  },
  rightLinear: {
    position: 'absolute',
    top: 0,
    right: ScaleS(13),
    width: ScaleS(32),
    height: ScaleS(42),
    alignItems: 'center'
  },
  discount: {
    fontSize: ScaleT(11),
    lineHeight: ScaleS(15),
    fontWeight: '500',
    color: '#444444',
    textAlign: 'center'
  },
  rightTriangle: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    borderStyle: 'solid',
    borderLeftColor: 'transparent',
    borderLeftWidth: ScaleS(16),
    borderRightColor: 'transparent',
    borderRightWidth: ScaleS(16),
    borderBottomColor: '#444444',
    borderBottomWidth: ScaleS(8)
  },
  icon: {
    position: 'absolute',
    left: 0,
    bottom: 0
  }
})
